<template>
  <div class="add-box">
    <el-button type="primary" @click="addbrand">添加</el-button>
  </div>
  <el-table :data="tableData" border>
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="分类名称"></el-table-column>
    <el-table-column prop="level" label="级别"></el-table-column>
    <el-table-column prop="productCount" label="商品数量"></el-table-column>
    <el-table-column prop="productUnit" label="数量单位"></el-table-column>
    <el-table-column prop="navStatus" label="导航栏"
      ><template #default="scope">
        <el-switch
          v-model="scope.row.navStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changeHandle(scope.row)"
        ></el-switch> </template
    ></el-table-column>
    <el-table-column prop="showStatus" label="是否显示">
      <template #default="scope">
        <el-switch
          v-model="scope.row.showStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changeHandle(scope.row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序"></el-table-column>
    <el-table-column label="设置">
      <template #default="scope"
        ><div class="box">
          <el-button
            @click="seeDown(scope.row)"
            :disabled="scope.row.level === 1 ? true : false"
            >查看下级</el-button
          >
          <el-button>转移商品</el-button>
        </div></template
      >
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <div class="box">
          <el-button
            @click="router.push('/pms/updateProductCate?id=' + scope.row.id)"
            >编辑</el-button
          >
          <el-button type="danger" @click="deleteFn(scope.row.id)"
            >删除</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <el-pagination
      v-model:currentPage="listParams.pageNum"
      v-model:page-size="listParams.pageSize"
      background
      layout="total, sizes, prev, pager, next ,jumper"
      :total="state.total"
      @size-change="pageSizeChange"
      @current-change="pageNumChange"
      :page-sizes="[5, 10, 15]"
    />
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { user } from "@/api";
import { reactive, toRefs, watch } from "vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const addbrand = () => {
  router.push("/pms/addProductCate");
};
interface Istate {
  tableData: IGoodsData[];
  listParams: IGoodClassParams;
  total: number;
}
const state = reactive<Istate>({
  tableData: [],
  listParams: {
    parentId: route.query.id ? parseInt(route.query.id as string) : 0,
    pageNum: 1,
    pageSize: 5,
  },
  total: 0,
});
const { tableData, listParams } = toRefs(state);
const getGoodList = () => {
  user.goodsClassifyApi(state.listParams).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data.list;
      state.total = res.data.total;
    }
  });
};
getGoodList();

const changeHandle = (row: IGoodsData) => {};
const pageSizeChange = () => {
  getGoodList();
};
const pageNumChange = () => {
  getGoodList();
};

const seeDown = (row: IGoodsData) => {
  listParams.value.parentId = row.id;
  getGoodList();
  router.push(`/pms/productCate?parentId=${row.id}`);
};
const deleteFn = (id: number) => {
  ElMessageBox.confirm("确定要删除吗").then(() => {
    user.deleteCategoryApi(id).then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
      getGoodList();
    });
  });
};
watch(
  () => route.query,
  () => {
    getGoodList();
    router.go(0);
  }
);
</script>
<style lang="less" scoped>
/deep/.cell {
  text-align: center;
}

/deep/.el-table_1_column_1 {
  text-align: center;
}
.add-box {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 0 0 4px 2px #ccc;
}
.box {
  display: flex;
  justify-content: space-around;
  .el-button {
    width: 50px;
    height: 30px;
    font-size: 12px;
  }
}
</style>
